<script setup lang="ts">
//  h函数是vue内置的确切的名字(createVnode) 创建结构的
//  render函数是 渲染结构的
import { h, onMounted, render } from 'vue'
// h + render 创建虚拟DOM结构并渲染
// 参数1: 是标签名/组件名
// 参数2: 是描述标签的属性 是一个对象 没有就写null
// 参数3: 是标签/组件的内容, 可以是字符串也可以是数组
// 第一步 使用h函数创建虚拟DOM
// 注意: 类名尽量不要使用class 推荐使用className
const vnode = h(
  'h1',
  { id: 'header', className: 'box' },
  '我是通过h函数创建的标题'
)
console.log(vnode) // vnode就是虚拟DOM
// 第二步 使用render函数渲染虚拟DOM
// 参数1: 是要渲染的虚拟DOM
// 参数2: 是虚拟DOM渲染的位置
onMounted(() => {
  render(vnode, document.querySelector('#father')!)
})
</script>
<template>
  <!-- <h1 id="header" class="box">大标题</h1> -->
  <div id="father"></div>
</template>

<style scoped></style>
